<template>
	<view class="">
		<view class="kql">
			<view class="kql-top">可清理</view>
			<view class="kql-bto">{{dataAll}}M</view>
		</view>
		<view class="list-wrap">
			<view class="wrap" style="border-bottom: 1px solid #EDEDED;">
				<view class="tit">缓存文件</view>
				<view class="msg">{{datas}}M</view>
				<view class="des tit">使用嘉会通过程中产生的临时数据，清理后不影响正常使用。</view>
				<view class="btn" @click="qchc(1)">
					<button type="primary" :disabled="qchcs">清除</button>
				</view>
			</view>
			<view class="wrap" style="padding-bottom: 20rpx;">
				<view class="tit">离线模式缓存</view>
				<view class="msg">{{datax}}M</view>
				<view class="des tit">【离线模式】下载的图片，观看时不消耗流量。可在无网络、网络不稳定时观看 。</view>
				<view class="btn"  @click="qchc(2)">
					<button type="primary" :disabled="qchcx">清除</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	let datas=ref(0)
	let datax=ref(0)
	let dataAll=ref(0)
	onMounted(()=>{
		// datas.value=getRandomNumberInclusive()
		// datax.value=getRandomNumberInclusive()
		datas.value=20
		datax.value=17
		dataAll.value=datax.value+datas.value
	})
	let getRandomNumberInclusive=()=> {
	  return Math.floor(Math.random() * 20) + 1;
	}

	let qchcs=ref(false);
	let qchcx=ref(false);
	let qchc=(type)=>{
		if(type==1){
			datas.value=0
			dataAll.value=datax.value+datas.value
			qchcs.value=true
			
		}else if(type==2){
			datax.value=0
			dataAll.value=datax.value+datas.value
			qchcx.value=true
			
		}
		uni.showToast({
			title:"清除成功",
			icon:'none',
			duration:2000
		})
	}
</script>

<style lang="scss" scoped>
	.kql{
		padding: 20rpx;
		.kql-top{
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
		.kql-bto{
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 60rpx;
			color: #333333;
		}
	}
	.list-wrap {
		.wrap {
			position: relative;

			.btn {
				position: absolute;
				top: 40rpx;
				right: 0;
				button{
					
					width:130rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					
				}
			}

			.des {
				margin: 20rpx 0;
			}

			.msg {
				font-weight: 600;
				font-size: 40rpx;
				color: #333333;
			}

			.tit {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			width: 85%;
			margin: 0 auto;

			padding: 30rpx 0 0;

		}

		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx auto;

	}

	page {
		background: #F3F4F5;
		padding: 0 28rpx;
	}
</style>